  <template>
  <base-layout
    :dialogVisible="dialogVisible"
    :dialogTitle="dialogTitle"
    @dialog-close="dialogClose"
  >
    <template #searchPanel>
      <search-panel
        :selectPer="'brandStock:page'"
        @search="search"
        :showSearchButton="true"
        :showExportButton="true"
      >
        <Job-shop v-model="form.storeId" placeholder="所属门店" />
        <el-select
          clearable
          style="width: 200px"
          v-model="form.storageId"
          placeholder="现存仓库"
        >
          <el-option
            v-for="item in storageList"
            :key="item.id"
            :value="item.id"
            :label="item.storageName"
          />
        </el-select>
        <el-cascader clearable style="width: 200px" v-model="form.partsType" :options="categoryTreeList" :props="categoryProps" placeholder="精品类别">

        </el-cascader>
        <!-- <el-select
          clearable
          style="width: 200px"
          v-model="form.partsType"
          placeholder="配件类别"
        >
          <el-option
            v-for="item in dict['汽车配件类型']"
            :key="item.id"
            :value="item.value"
            :label="item.text"
          />
        </el-select> -->
        <el-input
          v-model="form.likeName"
          clearable
          placeholder="精品编号/精品名称"
          style="width: 200px"
        />
        <!-- <el-button @click="stockWarn" icon="el-icon-setting" type="primary"
          >库存预警设置</el-button
        > -->
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{ row }">
          <i
            class="el-icon-view"
            title="查看"
            style="margin-left: 15px; cursor: pointer"
            v-permission="'brandStock:detail'"
            @click="view(row, '编辑')"
          ></i>
        </template>
      </data-table>
    </template>
    <template #dialog>
      <StockWarnSet :id="1" />
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import {
  page,
  changeStatus
} from '@/api/pre-sale/boutiqueStock/storageManagement'
import { findByStore } from '@/api/after-sale/storehouseManage/warehouseManage'
import { getDict } from '@/utils'
import StockWarnSet from './component/stockWarnSet'
import { getTreeCat } from '@/api/pre-sale/qualityManagement/category'

export default {
  components: {
    StockWarnSet
  },
  mixins: [
    baseMixin({
      idName: 'id',
      findData: page,
      dataName: ['content', 'totalRecords'],
      format(res) {
        return res.map((data) => {
          data.statusName = data.status === true ? '启用' : '禁用'
          return data
        })
      }
    })
  ],
  data() {
    return {
      tableColumnAttributes: [
        { name: '所属门店', value: 'storeName', type: 'text' },
        { name: '精品编号', value: 'partsCode', type: 'text' },
        { name: '精品名称', value: 'partsName', type: 'text' },
        { name: '一级类别', value: 'partsType', type: 'text' },
        { name: '二级类别', value: 'partsUnit', type: 'text' },
        { name: '现存仓库', value: 'storageName', type: 'text' },
        { name: '仓库编号', value: 'storageCode', type: 'text' },
        { name: '库存总数量', value: 'num', type: 'text' },
        { name: '平均成本单价', value: 'avgPurchasePrice', type: 'text' },
        { name: '平均销售价', value: 'avgStoragePrice', type: 'text' },
        {
          name: '状态',
          value: 'statusName',
          type: 'switch',
          valueId: 'status',
          action: (row) => {
            changeStatus(row.id).then((res) => {
              this.search()
            })
          }
        }
      ],
      dict: [],
      storageList: [],
      form: {
        storageId: '',
        partsType: ''
      },
      // 精品类别，tree形结构
      categoryTreeList: [],
      categoryProps: {
        value: 'label',
        checkStrictly: true
      }
    }
  },
  watch: {
    'form.storeId': function(value) {
      if (value) {
        this.getWareHouse(value)
        this.requestCategoryTree(value)
        // this.dict = getDict(['汽车配件类型'], this.form.storeId)
      }
      this.form.storageId = ''
      this.form.partsType = ''
    }
  },
  methods: {
    // 查看
    view(row, type) {
      this.$router.push({
        path: '/boutiqueStock/inStockDetailManage',
        query: {
          id: row.id
        }
      })
    },
    // 获取仓库
    async getWareHouse(id) {
      const { data } = await findByStore(id)
      this.storageList = data
    },
    search() {
      const { partsType } = this.form
      this.searchOptions = { ...this.form }
      this.searchOptions.partsType = partsType[0]
      this.searchOptions.partsUnit = ''
      if (partsType.length == 2) {
        this.searchOptions.partsUnit = partsType[partsType.length - 1] || ''
      }
      this.currentPage = 1
      this.setTableData()
    },
    // 库存预警弹窗
    stockWarn() {
      this.handleDataInsert('库存预警设置')
    },
    requestCategoryTree(storyId) {
      getTreeCat({ storyId }).then(res => {
        this.categoryTreeList = res.data || []
      })
    }
  },
  mounted() {
    this.dict = getDict(['汽车配件类型'], this.form.storeId)
  }
}
</script>
